<link rel="stylesheet" type="text/css" href="${base}/res/lib/ztree/jquery.ztree.css">
<script type="text/javascript" src="${base}/res/lib/ztree/jquery.ztree.js"></script>
<script type="text/javascript">
    var setting = {
        view: {
            showLine: true,
            selectedMulti: false,
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    var zNodes = [
    <#if items?exists>
        <#list items as item>
            <#if item_has_next>
                {
                    id:${item.id},
                    pId:${item.parent?default("0")},
                    name: '${item.name?default("")}',
                    type: '${item.type}',
                    url: '<#if item.type = 'tree_item'>${base}/admin/redirect?id=${item.id}<#else>javascript:void(0);</#if>',
                    open:${item.open?string("true","false")},
                    target: '${item.target?default("")}'
                },
            <#else>
                {
                    id:${item.id},
                    pId:${item.parent?default("0")},
                    name: '${item.name?default("")}',
                    type: '${item.type}',
                    url: '<#if item.type = 'tree_item'>${base}/admin/redirect?id=${item.id}<#else>javascript:void(0);</#if>',
                    open:${item.open?string("true","false")},
                    target: '${item.target?default("")}'
                }
            </#if>
        </#list>
    </#if>
    ];

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeMenu");
        zTree.expandNode(treeNode);

        if (treeNode.type === 'tree_item') {
            addTabs(treeNode.id, treeNode.name, treeNode.url, true);
        }
        e.preventDefault();
    }

    function addTabs(id, name, url, closable) {
        $.get('${base}/admin/tabs?id=' + id, function (result) {
            if (result.success = false) {
                alert(result.message);
            }
            else {
                var data = result.data;
                if (data.length == 1) {
                    addIframeTab(name, url, closable);
                }
                else if (data.length > 1) {
                    addSubTab(id, name, closable, data);
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                    }
                }
            }
        });
    }

    function addSubTab(id, name, closable, data) {
        var subTabId = 'sub-tab-' + id;
        var template = '<div id="' + subTabId + '" class="easyui-tabs" border="false" fit="true" tabPosition="bottom" style="padding:0px; margin:0px;">';
        template += '</div>';
        var tab = $("#main-tabs");
        if (tab.tabs('exists', name)) {
            tab.tabs('select', name);
        }
        else {
            tab.tabs('add', {
                title: name,
                closable: closable,
                content: template
            });
        }

        //处理subTab中的tab页签
        var subTab = $("#" + subTabId);
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            console.log(item);
            if (!subTab.tabs('exists', item.name)) {
                var iframeId = 'tab-iframe-' + item.id;
                subTab.tabs('add', {
                    title: item.name,
                    closable: false,
                    selected: item.open,
                    content: function () {
                        if (item.open) {
                            return '<iframe id="' + iframeId + '" loaded=1 src="${base}' + item.url + '" _src="${base}' + item.url + '" scrolling="auto" frameborder="0" style="width:100%;height:100%;"></iframe>';
                        } else {
                            return '<iframe id="' + iframeId + '" loaded=0 src="" _src="${base}' + item.url + '" scrolling="auto" frameborder="0" style="width:100%;height:100%;"></iframe>';
                        }
                    },
                    config: {
                        iframeId: iframeId
                    }
                });
            }
        }


        subTab.tabs({
            onSelect: function (title, index) {
                var tab = subTab.tabs('getSelected');
                var options = tab.panel('options');
                var iframeId = options.config.iframeId;
                var iframe = $('#' + iframeId);
                console.log(iframe.attr('loaded'))
                if (iframe.attr('loaded') == 0) { //如果iframe没有加载，那么需要加载一下
                    iframe.attr('src', iframe.attr('_src')); //加载
                    iframe.attr('loaded', 1);  //设置加载状态为：已加载
                } else {
                    console.log('已经加载:' + iframeId);
                }
            }
        });
    }

    function addIframeTab(name, url, closable) {
        var tab = $("#main-tabs");
        if (tab.tabs('exists', name)) {
            tab.tabs('select', name);
        }
        else {
            var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
            tab.tabs('add', {
                title: name,
                closable: closable,
                content: content
            });
        }
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeMenu"), setting, zNodes);
    });
</script>

<div class="treeMenuDiv">
    <ul id="treeMenu" class="ztree"></ul>
</div>